{% extends "base.html" %}
            {% block control %}<li class="treeview active">{% endblock %}
          {% block node %}
                <li class="active"><a href="/node/"><i class="fa fa-genderless"></i>节点管理</a></li>
             {% endblock %}
      <!-- Content Wrapper. Contains page content -->
             {% block content %}

          <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-television"></i> 管理中心</a></li>
            <li><a href="/node">节点列表</a></li>
            <li class="active">{{ node.node_name }}</li>
          </ol>

        <!-- Main content -->
         <section class="invoice">
          <!-- title row -->
          <div class="row">
            <div class="col-xs-12">
              <h2 class="page-header">
                <i class="fa fa-globe"></i> {{ node.node_name }}
              </h2>
            </div><!-- /.col -->
          </div>
          <!-- info row -->
          <div class="row invoice-info">
            <div class="col-sm-10 invoice-col">
                节点状态：{{ node.Status }}<br>
                IP地址：{{ node.NodeIP }}<br>
                节点名称：{{ node.node_name }}<br>
                节点识别码：{{ node.token }}<br>
                操作系统：{{ node.System_release }}<br>
                内核版本：{{ node.Kernel_release }}<br>
                <div class="progress-group">
                        <span class="progress-text">内存使用：</span>
                        <span class="progress-number"><b>{{ node.Mem_used }}</b>/{{ node.Mem_total }}</span>
                        <div class="progress sm">
                          <div class="progress-bar progress-bar-aqua" style="width:{{ node.Mem_per }}"></div>
                        </div>
                      </div><!-- /.progress-group -->
                <div class="progress-group">
                        <span class="progress-text">CPU使用：</span>
                        <span class="progress-number"><b>{{ node.cpu_free }}</b></span>
                        <div class="progress sm">
                          <div class="progress-bar progress-bar-aqua" style="width:{{ node.cpu_free }}"></div>
                        </div>
                      </div><!-- /.progress-group -->
                当前流量使用：
            </div><!-- /.col -->


          <!-- Table row -->
          <div class="row">
            <div class="col-xs-12 table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>网卡</th>
                    <th>In/Out</th>
                    <th>总流量</th>
                    <th>实时速率</th>
                  </tr>
                </thead>
                <tbody>
                    {% load myfilter %}
                    {% for k,v in network.items %}
                  <tr>
                    <td rowspan="2">{{ k }}</td>
                  <td >流入</td>
                     <td>{{ network|rb:k }}</td>
                    <td>{{ network|rs:k }}</td>
                  </tr>
                   <tr>
                    <td>流出</td>
                    <td>{{ network|tb:k }}</td>
                    <td>{{ network|ts:k }}</td>
                  </tr>
                    {% endfor %}
                </tbody>
              </table>
            </div><!-- /.col -->
          </div><!-- /.row -->
          </div>
          <!-- this row will not appear when printing -->
        </section><!-- /.content -->
    {% endblock %}

  {% block js %}
    {% load staticfiles %}
        <!-- DataTables -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
         Both of these plugins are recommended to enhance the
         user experience. Slimscroll is required when using the
         fixed layout. -->
      <script>

      $(function () {
        $("#example1").DataTable();
      });
    </script>
  {% endblock %}
